<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <title>图书馆座位预约系统</title>
    <script type="text/javascript" src="{{ basepath }}static/js/jquery.js"></script>
    <link rel="stylesheet" type="text/css" href="{{ basepath }}static/css/sweetalert.css">
    <!--plugin-->
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        body {
            width:100%;
            height:100%;
            background-image:url("../library/static/img/index_img.jpg");
            background-repeat:no-repeat;
            background-size:100%;
            z-index:0;
        }
        .header {
            font-family:"楷体";
            text-align:center;
            font-size:70px;
            color:#666167;
            font-weight:900;
        }

        .header a{
            font-size:30px;
        }
        .content p {
            text-align:center;
            font-size:30px;
            color:white;
        }

        .select{
            text-align: center;
        }
         .select #select1 {
             width:110px;
             height:50px;

        }
         .select #select2{
             width:60px;
             height:50px;

        }
        .select #room_select {
             width:200px;
             height:50px;

        }

        .seat_title{
            line-height: 30px;
            font-size: 20px;
            font-weight:600;
            display:none;
            text-align: center;
        }
        .seat_style{
            width:90%;
            display: flex;
            flex-wrap: wrap;
            padding:0;
            margin:0 auto;
        }
        .seat_style li{
            width:21%;
            list-style: none;
            padding:15px;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            text-align: center;
            font-size: 20px;
            border-radius: 4px;
            margin-bottom:30px;
            margin-right: 2%;
            margin-left: 2%;
        }
        .no_seat{
            background-color: #e3e3e3;
            color:#5e5e5e;
        }
        .has_seat{
            background-color: #fff;
        }

    </style>
</head>
<body>
<!-------------------------------------- 头部开始 -------------------------------------->
<p style="padding: 15px;line-height: 30px;font-size: 20px;font-weight: 600;">
    <a  href="{{ basepath }}/library/index"><span class="span1">返回</span></a></p>

<!-------------------------------------- 头部结束 -------------------------------------->
<!-------------------------------------- 内容开始 -------------------------------------->
<main>
    <div class="header">
        <p>图书馆座位预约系统</p>

    </div>

<div class="select">
    <form >
    选择教室：<select name="room" id="room_select">
    {% for room_all_data in room_all_data %}
        <option value='{{ room_all_data.id }}' id='{{ room_all_data.id }}'>{{ room_all_data.name }}</option>
    {% endfor %}
    </select>
    <button type="button" style="width:3%;margin-top:10px;margin-bottom: 10px;margin-left: 21px;"onclick="check()">查看</button>
    </form>
</div>

    <img id="seat_img" src="" alt="" style="width:40%;margin: 10px 30%;">

    <p class="seat_title">请选择座位</p>
    <ul id="seat" class="seat_style"></ul>
    <!--<div>-->
        <!--<input type="text" hidden="hidden" id="seat_select" name = "seat_select">-->
    <!--</div>-->



</main>
<!-------------------------------------- 内容结束 -------------------------------------->
<!-------------------------------------- 尾部开始 -------------------------------------->
<footer>
    <div class="container">

    </div>
</footer>
<!-------------------------------------- 尾部开始 -------------------------------------->
</body>
</html>
<style>

</style>
<script>
    var seats = [];
    $(function () {

    });
    function check() {
        var room_select = $('#room_select').val();
        var data = {
            room_select: room_select,
        }

    $.ajax({
           type: "post",
           url: "{{ basepath }}check_room",
           dataType: "json",
           data:data ,
            success: function (seat_pic,result) {
                // 接受数据传递给全局变量seats
                seats = seat_pic;
                console.log(seats)
                setTable(); // 界面渲染接口数据
           }

       });
        function setTable(){
            var url = seats.seat_pic
            $("#seat_img").attr("src",url);
            $('ul li').remove();// / 图片路由
            $('.seat_title').css('display','block')
            // 界面渲染座位
            for(var i in seats.seat_datas){
                var id = seats.seat_datas[i].id;
                var zwh = seats.seat_datas[i].zwh;
                var state = seats.seat_datas[i].state;
                var data = {
                    id: id,
                }
                var cls = state ? 'has_seat' : 'no_seat';
                $("#seat").append("<li class='"+cls+"' id='"+id+"'>"+zwh+"</li>")
            }

            $("#seat").find("li") .click(function () {
                if (seats.yyd_num == 0){
                    if($(this).hasClass('has_seat')){
                        var con=confirm('您选择的座位号是' + $(this).html()+'，是否继续预约？')
                        if(con){
                            $.ajax({
                               type: "post",
                               url: "{{ basepath }}booking_seat",
                               dataType: "json",
                               data:{id:this.id },
                                success: function (data,result) {
                                   alert('您已预约成功')
                                    console.log(data);
                                    check(); // 界面重新渲染
                               }
                           });
                        }else{
                            alert('您已取消预约！')
                        }


                    }
                }
                else{
                        alert('您已有占座，请查看您的预约单记录！')
                    }

             })
        }
    }



</script>
